<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线考试系统 - 成绩查询</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 保持与主页面一致的样式 */
    :root {
      --primary: #4361ee;
      --secondary: #3f37c9;
      --student-accent: #4361ee;
      --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      --transition: all 0.3s ease;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fb;
      color: #333;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* 导航栏样式（与主页面一致） */
    .navbar {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 0.8rem 1rem;
    }

    .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
    }

    .navbar-brand i {
      margin-right: 10px;
      font-size: 1.8rem;
    }

    .nav-link {
      color: rgba(255, 255, 255, 0.85) !important;
      font-weight: 500;
      padding: 0.5rem 1rem !important;
      border-radius: 4px;
      margin: 0 3px;
      transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
      background-color: rgba(255, 255, 255, 0.15);
      color: white !important;
    }

    /* 主内容区域 */
    .main-content {
      flex: 1;
      padding: 2rem 0;
    }

    .card {
      border: none;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      transition: var(--transition);
      height: 100%;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .card-header {
      background: white;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding: 1.25rem 1.5rem;
      font-weight: 700;
      display: flex;
      align-items: center;
    }

    .card-header i {
      margin-right: 10px;
      font-size: 1.25rem;
      color: var(--student-accent);
    }

    .card-body {
      padding: 1.5rem;
    }

    .card-title {
      font-weight: 700;
      margin-bottom: 0.75rem;
    }

    .card-text {
      color: #6c757d;
      margin-bottom: 1.5rem;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
      border: none;
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      border-radius: 8px;
      transition: var(--transition);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
    }

    /* 页脚样式（与主页面一致） */
    .footer {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 2rem 0;
      margin-top: auto;
    }

    .footer-title {
      font-weight: 700;
      margin-bottom: 1rem;
      font-size: 1.25rem;
    }

    .footer-links {
      list-style: none;
      padding: 0;
    }

    .footer-links li {
      margin-bottom: 0.5rem;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: white;
      text-decoration: underline;
    }

    .social-icons {
      display: flex;
      gap: 15px;
      margin-top: 1rem;
    }

    .social-icons a {
      color: white;
      font-size: 1.5rem;
      transition: var(--transition);
    }

    .social-icons a:hover {
      transform: translateY(-3px);
    }

    .copyright {
      text-align: center;
      padding-top: 1.5rem;
      margin-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
      .navbar-brand {
        font-size: 1.2rem;
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="fas fa-graduation-cap"></i>在线考试系统
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#"><i class="fas fa-home"></i> 主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/exam/list"><i class="fas fa-pen-alt"></i> 参与考试</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/score/list"><i class="fas fa-chart-line"></i> 成绩查询</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/resources"><i class="fas fa-book-open"></i> 学习资源</a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="/profile">
            <i class="fas fa-user-circle"></i> 个人信息
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/notifications">
            <i class="fas fa-bell"></i> 通知
            <span class="badge bg-danger">3</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
  <div class="container">
    <div class="card">
      <div class="card-header">
        <i class="fas fa-chart-line"></i> 成绩查询
      </div>
      <div class="card-body">
        <h5 class="card-title">我的考试成绩</h5>
        <p class="card-text">查看您最近的考试成绩和详细记录。</p>
        <table class="table table-hover">
          <thead>
          <tr>
            <th>课程名称</th>
            <th>考试时间</th>
            <th>分数</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>高等数学</td>
            <td>2025-06-05</td>
            <td>92</td>
            <td><span class="badge bg-success">通过</span></td>
          </tr>
          <tr>
            <td>英语</td>
            <td>2025-05-20</td>
            <td>88</td>
            <td><span class="badge bg-success">通过</span></td>
          </tr>
          <tr>
            <td>计算机基础</td>
            <td>2025-04-10</td>
            <td>75</td>
            <td><span class="badge bg-warning text-dark">补考</span></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-4 mb-lg-0">
        <h5 class="footer-title">在线考试系统</h5>
        <p>提供安全、可靠的在线考试解决方案，服务于教育机构与企业培训。</p>
        <div class="social-icons">
          <a href="#"><i class="fab fa-weixin"></i></a>
          <a href="#"><i class="fab fa-qq"></i></a>
          <a href="#"><i class="fab fa-weibo"></i></a>
          <a href="#"><i class="fab fa-github"></i></a>
        </div>
      </div>

      <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
        <h5 class="footer-title">快速链接</h5>
        <ul class="footer-links">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务条款</a></li>
          <li><a href="#">隐私政策</a></li>
          <li><a href="#">帮助中心</a></li>
        </ul>
      </div>

      <div class="col-lg-3 col-md-4 mb-4 mb-md-0">
        <h5 class="footer-title">联系我们</h5>
        <ul class="footer-links">
          <li><i class="fas fa-envelope me-2"></i> contact@examsystem.com</li>
          <li><i class="fas fa-phone me-2"></i> 15388254362 </li>
          <li><i class="fas fa-map-marker-alt me-2"></i> 北京城市学院3s117</li>
        </ul>
      </div>

      <div class="col-lg-3 col-md-4">
        <h5 class="footer-title">系统信息</h5>
        <div class="alert alert-light small">
          <i class="fas fa-info-circle me-2"></i>
          当前版本 v1.0.0 | 最后更新 2025-06-08
        </div>
        <div class="d-grid gap-2">
          <button class="btn btn-light btn-sm">
            <i class="fas fa-download me-2"></i> 下载移动端
          </button>
        </div>
      </div>
    </div>

    <div class="copyright">
      &copy; 2025 在线考试系统 版权所有 | 北城在线考试系统小组
    </div>
  </div>
</footer>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>
